<template>
	<view>
		<view class="feedback_box z-radius-24 z-padding-32 z-margin-32">
			<textarea placeholder="请输入您的反馈意见" class="content" v-model="content" maxlength="-1" value="" />
			<view class="box">
				<view class="images-box" v-for="(item,index) in images" @tap="chooseImages(index)">
					<image class="icon" :src="cdn(item)"></image>
					<image src="/static/service/del.png" class="del" @tap.stop="delImages(index)"></image>
				</view>
				<view class="images-box" v-if="images.length<9" @tap="chooseImages">
					<image src="/static/service/upload.png" class="icon"></image>
				</view>
			</view>
		</view>

		<view class="z-margin-32">手机号码</view>
		<view class="inputbox z-radius-24 z-padding-32 z-margin-32">
			<input v-model="mobile" type="number" placeholder="输入手机号码（选填）" />
		</view>
		<view class="z-btn z-margin-lr-32 z-margin-t-100" @tap="save">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			images: [],
			mobile: '',
			content: ''
		};
	},
	methods: {
		save() {
			this.http.post('feedback/submitfeedback', {
				mobile: this.mobile,
				content: this.content,
				images: this.images.join(','),
				type: 1
			}).then((res) => {
				this.util.toast(res.msg);
				setTimeout(() => {
					this.util.back();
				}, 1000);
			});
		},
		setContent(e) {
			this.setData({
				content: e.detail.value
			});
		},
		setMobile(e) {
			this.setData({
				mobile: e.detail.value
			});
		},
		delImages(e) {
			let index = e
			this.images.splice(index, 1);
			this.images = this.images
		},
		chooseImages(e) {
			let index = e
			this.http.chooseImg(['album', 'camera'], true, true).then((res) => {
				let arr = this.images;
				if (index !== undefined) {
					arr.splice(index, 1, res.data.url);
				} else {
					arr.push(res.data.url);
				}
				this.images = arr
			});
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.feedback_box {
	background-color: #f5f7f9;
	box-sizing: border-box;
}
.inputbox {
	background-color: #f5f7f9;
	box-sizing: border-box;
}
.content {
	width: 100%;
}

.box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.images-box {
	position: relative;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.images-box:nth-of-type(4n) {
	margin-right: 0;
}
.del {
	position: absolute;
	width: 26rpx;
	height: 26rpx;
	right: 0;
	top: -13rpx;
	z-index: 10;
}

.icon {
	width: 140rpx;
	height: 140rpx;
}
</style>
